<template>
    <div>
        <h1>增加会员</h1>
        <table class="table table-bordered">
            <tbody>
               <tr>
                <td align="right">会员编号</td>
                <td><input type="text" v-model="info.memberCode" disabled></td>
               </tr>
               <tr>
                <td align="right">手机号</td>
                <td><input type="text"  v-model="info.tel" maxlength="11"></td>
               </tr>
               <tr>
                <td align="right">姓名</td>
                <td><input type="text"  v-model="info.userName"></td>
               </tr>
                <tr>
                <td align="right">证件类型</td>
                <td>
                    <select v-model="info.cardType">
                        <option value="">请选择</option>
                        <option :value="item" v-for="item in arr">{{ item }}</option>
                    </select>
                </td>
               </tr>
               <tr>
                <td align="right">身份证</td>
                <td><input type="text"  v-model="info.card" maxlength="18"></td>
               </tr>
               <tr>
                <td align="right">会员生日</td>
                <td><input type="date"  v-model="info.birthDay"></td>
               </tr>
               <tr>
                <td align="right">积分</td>
                <td><input type="text"  v-model="info.score"></td>
               </tr>
               <tr>
                <td align="right">余额</td>
                <td><input type="text"  v-model="info.money"></td>
               </tr>
               <tr>
                <td align="right">等级</td>
                <td>
                    <select  v-model="info.levelId">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in LevelList">
                                {{ item.levelName }}
                        </option>
                    </select>
                </td>
                </tr>
                <tr>
                <td align="right">会员性别</td>
                <td><input type="radio" name="gender" :value="1" v-model="info.gender">男
                    <input type="radio" name="gender" :value="0" v-model="info.gender">女
                </td>
               </tr>
               <tr>
                <td align="right">会员爱好</td>
                <td><input type="checkbox" name="likes" v-model="info.likes" value="吃">吃
                <input type="checkbox" name="likes" v-model="info.likes" value="喝">喝
                <input type="checkbox" name="likes" v-model="info.likes" value="抽">抽
                </td>
               </tr>
               <tr>
                <td align="right">会员简介</td>
                <td>
                    <textarea rows="5" cols="50"  v-model="info.desc">

                    </textarea>
                </td>
               </tr>
               <tr>
                <td align="right">状态</td>
                <td><input type="radio" name="state">开启
                    <input type="radio" name="state">禁用
                </td>
               </tr>
               <tr>
                <td align="right">是否同意条款</td>
                <td>
                   <input type="checkbox"  v-model="info.isAgree">xxx条款
                </td>
               </tr>
               <tr>
                <td align="right"></td>
                <td><input type="button" value="添加" class="btn btn-success" @click="ok"></td>
            </tr>
            </tbody>             
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import{ref,reactive,onMounted}from 'vue'
import{useRouter,useRoute}from 'vue-router'
const router=useRouter()
const route=useRoute()
//声明一个变量获取增加会员所需数据
let info:any=reactive({
  "memberCode": new Date(),
  "tel": "",
  "userName": "",
  "card": "",
  "birthDay": "",
  "score":"",
  "money": "",
  "levelId": "",
  "gender": 1,
  "likes": [],
  "desc": "",
  "isAgree": "",
  "cardType":""
})
//绑定下拉
let arr:any=ref(["身份证","驾驶证","军官证"]);

//获取等级
//onMounted 相当于文档就绪函数     生命周期钩子函数
//声明一个变量 接受等级列表
let LevelList:any=ref([{
    id:'',
    levelName:''
}]);

onMounted(()=>{
     //发送网络请求
    getLevelList();
});
const getLevelList=()=>{
    axios({
        url:'/api/Member/GetMemberList',
        method:'get'
    })
    .then((res)=>{
         console.log(res);
         LevelList.value=res.data;
    })  
    .then((err)=>{
         console.log(err);
    })  
};
const ok=()=>{
   if(info.tel==''){
    alert('手机号不为空');
    return;
}
  //手机号正则
  let reg=/^1[3-9]\d{9}$/;
if(reg.test(info.tel)==false){
    alert('手机号不正确');
    return;
}
if(info.userName==''){
    alert('姓名不为空');
    return;
}
if(info.card==''){
    alert('身份证不为空');
    return;
}
let reg1=/^\d{17}[0-9xX]$/;
if(reg1.test(info.card)==false){
     alert('身份证号不正确');
    return;
}
if(info.birthDay==''){
    alert('生日必填');
    return;
}
if(info.score==''){
    alert('积分不为空');
    return;
}
let reg2=/^[+]?\d+$/;
if(reg2.test(info.score)==false){
    alert('积分只能是正数');
    return;
}
if(info.money==''){
    alert('余额不为空');
    return;
}
if(reg2.test(info.money)==false){
    alert('余额只能是正数');
    return;
}
if(info.levelId==''){
    alert('等级必选');
    return;
}
if(info.likes.length==0){
    alert('爱好必选');
    return;
}
if(info.desc==''){
    alert('简介不为空');
    return;
}
//let reg3=/^[\u4e00-\u9fa5]{1-50}$/;
//if(reg3.test(info.desc)==false){
  //  alert('只能是50以内的汉字');
   // return;
//}
if(info.isAgree==false){
    alert('同意条款必选');
    return;
}
info.likes=info.likes.toString();
axios({
    url:'/api/Member/AddMember',
    method:'post',
    data:info
})
.then((res)=>{
    console.log(res);
    if(res.data>0){
        alert('添加成功');
        router.push('/memberList');
        return;
    }
    if(res.data==-1){
        alert('手机号重复');
        return;
    }
    else{
        alert('添加失败');
        return;
    }
})
.catch((err)=>{
    console.log(err);
})

}


</script>

<style scoped>

</style>